<div style="margin-top:45px;" v-if="status">

	<!-- 图标 -->
	<a-alert v-if="!status.connect"
		message="警告"
		description="洛克人眼保健操掉线啦！！！"
		type="warning"
		showIcon
	></a-alert>

	<template v-if="status.data">
		<a-row style="margin-top:30px;">
			<p>
				<a-button-group>
					<a-button                :disabled="!dirty" @click="btnValueReset"    >重置全部数值</a-button>
					<a-button type="primary" :disabled="!dirty" @click="btnValueSubmit"   >提交</a-button>
					<a-button                                   @click="btnRandomAvatar()">全部随机头像</a-button>
				</a-button-group>
				&emsp;
				<i v-show="this.dirty">
					摇奖的 BOSS 和头像在下面修改后别忘了点 <b style="color:crimson;">提交</b> 按钮！否则不会生效！
				</i>
			</p>
		</a-row>
		<br/>

		<a-row v-for="(array, index) in frameIndexs" :key="index">
			<a-col :span="8" v-for="frameIndex in array" :key="frameIndex">
				<a-card v-if="frameIndex != null" style="padding: 12px;">
					<a-form>
						<a-form-item :wrapperCol="{span: 18, offset: 4}" style="margin-bottom: 1px;">
							<a-checkbox @change="(v) => onValueChange(frameIndex, 'enable', v)" :checked="frames[frameIndex].enable">
								是否启用
							</a-checkbox>
						</a-form-item>
						<a-form-item :label-col="{span : 4}" :wrapperCol="{span: 18}" label="名字" style="margin-bottom: 1px;">
							<a-input @change="(v) => onValueChange(frameIndex, 'title', v)" :value="frames[frameIndex].title"
								placeholder="BOSS 的名字"></a-input>
						</a-form-item>
						<a-form-item :label-col="{span : 4}" :wrapperCol="{span: 18}" label="图标" style="margin-bottom: 1px;">
							<a-select :value="frames[frameIndex].avatar" @change="(v) => onValueChange(frameIndex, 'avatar', v)">
								<a-select-option :value="option.avatar" :key="option.avatar" v-for="option in options">
									{{ option.name }}
								</a-select-option>
							</a-select>
						</a-form-item>
						<a-form-item :wrapperCol="{span: 24, offset: 0}" style="margin-bottom: 1px;">
							<a-button-group>
								<a-button @click="btnSelect(frameIndex)"
									:type="status.data.cursor == frameIndex ? 'danger' : 'default'" >选它</a-button>
								<a-button @click="btnDefaultName(frameIndex)">刷新名字</a-button>
								<a-button @click="btnRandomAvatar(frameIndex)">随机头像</a-button>
							</a-button-group>
						</a-form-item>
					</a-form>
				</a-card>
				<div v-else style="padding: 24px;">
					<a-button-group style="margin-bottom: 15px;">
						<a-button type="primary" @click="btnAnimeOpenBegin()">启动动画</a-button>
						<a-button                @click="btnAnimeOpenWait()" >停止动画</a-button>
						<a-button @click="btnSelect(-1)"
							:type="status.data.cursor == -1 ? 'danger' : 'default'" >选中间</a-button>
					</a-button-group>
					<p style="text-align:center;font-size:54px;margin-bottom:10px;">
						<a-icon type="sync" v-if="status.data.round" spin></a-icon>
						<span v-else-if="status.data.cursor == 0">左上</span>
						<span v-else-if="status.data.cursor == 1">上</span>
						<span v-else-if="status.data.cursor == 2">右上</span>
						<span v-else-if="status.data.cursor == 3">右</span>
						<span v-else-if="status.data.cursor == 4">右下</span>
						<span v-else-if="status.data.cursor == 5">下</span>
						<span v-else-if="status.data.cursor == 6">左下</span>
						<span v-else-if="status.data.cursor == 7">左</span>
						<span v-else>中间</span>
					</p>
					<a-button-group>
						<a-button @click="btnRoundBegin()" :type="!status.data.round ? 'primary' : 'default'">开始抽奖</a-button>
						<a-button @click="btnRoundEnd()"   :type=" status.data.round ? 'primary' : 'default'">停止抽奖</a-button>
					</a-button-group>
				</div>
			</a-col>
		</a-row>
	</template>

</div>
